<template>
  <div>
    <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
        datelist:[],
        ratelist:[],
    };
  },
  mounted: function () {
      axios({
          url:"http://127.0.0.1:8000/my/rate/"
      }).then(resp=>{
          console.log(resp.data)

          this.drawLine(resp.data.ratelist,resp.data.datelist);
      })
      
  },
  methods: {
    drawLine(ratelist,datelist) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "近期汇率表" },
        tooltip: {},
        xAxis: {
          data: datelist,
        },
        yAxis: {
            type:"value",
            max:6.5,
            min:6.6,
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: ratelist,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
</style>
